import axios from 'axios';
import { useRef, useState } from 'react';

// 定义文件分片大小（例如 5MB）
const CHUNK_SIZE = 5 * 1024 * 1024;

/** 解析当前页面功能 */
export default function FileUploader() {
  const [file, setFile] = useState(null); // 用于存储用户选择的文件
  const [uploadProgress, setUploadProgress] = useState(0); // 上传进度
  const uploading = useRef(false); // 用于防止重复触发上传逻辑

  // 当用户选择文件时触发
  const handleFileChange = (e) => {
    setFile(e.target.files[0]); // 将选择的文件存入状态
    setUploadProgress(0); // 重置上传进度
  };

  // 计算文件的唯一标识 (哈希)
  const calculateFileHash = async (file) => {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const sparkMD5 = require('spark-md5');
        const hash = sparkMD5.ArrayBuffer.hash(e.target.result);
        resolve(hash);
      };
      reader.readAsArrayBuffer(file);
    });
  };

  // 开始文件上传
  const handleUpload = async () => {
    if (!file || uploading.current) return; // 如果未选择文件或正在上传，则直接返回

    uploading.current = true; // 标记为正在上传
    const fileHash = await calculateFileHash(file); // 获取文件的唯一标识（哈希值）
    console.log('fileHash', fileHash);
    const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 计算文件分片总数
    // 检查哪些分片已经上传
    const { data: uploadedChunks } = await axios.post(
      'http://localhost:5000/check',
      {
        fileName: file.name,
        fileHash,
      },
    );

    // 上传未完成的分片
    for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
      if (uploadedChunks?.includes(chunkIndex)) {
        console.log('跳过chunkIndx', chunkIndex);
        setUploadProgress(((chunkIndex + 1) / totalChunks) * 100); // 更新进度
        continue; // 跳过已经上传的分片
      }
      console.log('上传chunkIndx', chunkIndex);
      // 创建当前分片
      const start = chunkIndex * CHUNK_SIZE; // 分片起始字节
      const end = Math.min(file.size, start + CHUNK_SIZE); // 分片结束字节
      const chunk = file.slice(start, end); // 获取分片

      // 上传分片
      const formData = new FormData();
      formData.append('chunk', chunk); // 当前分片
      formData.append('fileName', file.name); // 文件名
      formData.append('fileHash', fileHash); // 文件唯一标识
      formData.append('chunkIndex', chunkIndex); // 分片索引

      await axios.post(
        `http://localhost:5000/upload?fileHash=${fileHash}&chunkIndex=${chunkIndex}&fileName=${file.name}`,
        formData,
        {
          onUploadProgress: (progressEvent) => {
            const progress =
              ((chunkIndex + progressEvent.loaded / progressEvent.total) /
                totalChunks) *
              100;
            setUploadProgress(progress); // 实时更新上传进度
          },
        },
      );
    }

    // 通知服务端合并分片
    await axios.post('http://localhost:8000/HTB/merge', {
      fileName: file.name,
      fileHash,
      totalChunks,
    });

    alert('上传成功！');
    uploading.current = false; // 标记上传完成
  };

  return (
    <div style={{ padding: '20px' }}>
      <p>大文件上传（支持断点续传）</p>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>提交上传文件</button>
      <div style={{ marginTop: '20px' }}>
        <progress value={uploadProgress} max="100" />
        <div>上传进度：{uploadProgress.toFixed(2)}%</div>
      </div>
    </div>
  );
}